<!-- 引用编辑器 -->
<link rel="stylesheet" href="/static/kindeditor/themes/default/default.css" />
<script src="/static/kindeditor/kindeditor-all.js"></script>
<script src="/static/kindeditor/lang/zh-CN.js"></script>
<!--页面主要内容-->
<main class="lyear-layout-content">

  <div class="container-fluid p-t-15">
    <div class="row">
      <div class="col-lg-12">
        <div class="card">
          <div class="card-body">
            <form method="post" class="row" enctype="multipart/form-data" id="form">
              <!-- 商品分类 -->
              <div class="form-group col-md-12">
                <label for="typeid">商品分类</label>
                <div class="form-controls">
                  <select name="typeid" class="form-control" id="typeid">
                    <option value="0">请选择分类</option>
                    {foreach $TypeList as $item}
                    <option value="{$item.id}">{$item.name}</option>
                    {/foreach}
                  </select>
                </div>
              </div>
              <!-- 商品名称 -->
              <div class="form-group col-md-12">
                <label for="name">商品名称</label>
                <input type="text" class="form-control" id="name" name="name" placeholder="请输入商品名称" />
              </div>
              <!-- 商品价格 -->
              <div class="form-group col-md-12">
                <label for="price">商品价格</label>
                <input type="text" class="form-control" id="price" name="price" placeholder="请输入商品价格" />
              </div>
              <!-- 商品库存 -->
              <div class="form-group col-md-12">
                <label for="stock">商品库存</label>
                <input type="text" class="form-control" id="stock" name="stock" placeholder="请输入商品库存">
              </div>
              <!-- 商品状态 -->
              <div class="form-group col-md-12">
                <label for="flag">商品状态</label>
                <div class="clearfix">
                  <div class="custom-control custom-radio custom-control-inline">
                    <input type="radio" id="flagOne" name="flag" value="1" class="custom-control-input" checked>
                    <label class="custom-control-label" for="flagOne">新品</label>
                  </div>
                  <div class="custom-control custom-radio custom-control-inline">
                    <input type="radio" id="flagTwo" name="flag" value="2" class="custom-control-input">
                    <label class="custom-control-label" for="flagTwo">热销</label>
                  </div>
                  <div class="custom-control custom-radio custom-control-inline">
                    <input type="radio" id="flagThree" name="flag" value="3" class="custom-control-input">
                    <label class="custom-control-label" for="flagThree">推荐</label>
                  </div>
                </div>
              </div>
              <!-- 图片上传 -->
              <div class="form-group col-md-12">
                <label>多图上传</label>
                <div class="form-controls">
                  <ul class="list-inline row lyear-uploads-pic mb-0"></ul>
                  <input type="file" class="form-control" id="cover" name="cover" value="" multiple hidden />
                  <img class="img-thumbnail d-block" id="img" onclick="cover.click()" style="width: 200px;"
                    src="/static/admin/images/upload.png" alt="">
                </div>
              </div>
              <!-- 详细内容 -->
              <div class="form-group col-md-12">
                <label for="content">内容</label>
                <textarea id="content" name="content" placeholder="请输入商品详细内容"
                  style="width: 100%;height: 300px;"></textarea>
              </div>
              <!-- 确定/返回 -->
              <div class="form-group col-md-12">
                <button type="button" class="btn btn-primary" id="btn">确 定</button>
                <button type="button" class="btn btn-default" onclick="javascript:history.back(-1);return false;">返
                  回</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>
<!--End 页面主要内容-->

<script>
  var editor;
  KindEditor.ready(function (K) {
    //创建一个网页编辑器
    editor = K.create('textarea[name="content"]');
  })

  let urlArr = []
  var coverArr = []

  $('#cover').change(function () {
    // 获取文件对象
    let files = $(this)[0].files ? $(this)[0].files : {}
    for (let item of files) {
      // 调用图片预览函数
      let url = GetObjectURL(item)
      coverArr.push(item)
      urlArr.push(url)
    }
    // console.log(coverArr);
    let img = ''
    urlArr.forEach((item) => {
      img += `
        <li class="col-6 col-md-4 col-lg-2">
          <figure>
            <img src="${item}" alt="">
            <figcaption>
              <a class="btn btn-round btn-square btn-primary see"><i class="mdi mdi-eye"></i></a>
              <a class="btn btn-round btn-square btn-danger del"><i class="mdi mdi-delete"></i></a>
            </figcaption>
          </figure>
        </li>
        `
    })
    $('.lyear-uploads-pic').html(img)
  })
  // 查看图片
  $('.lyear-uploads-pic').on('click', '.see', function () {
    let file = $(this).parent().prev('img').attr('src')
    $.confirm({
      title: '查看图片',
      content: `
        <img src="${file}">
       `,
      buttons: {
        cancel: {
          text: '关闭',
          btnClass: 'btn-danger'
        }
      }
    })
  })
  // 删除图片
  $('.lyear-uploads-pic').on('click', '.del', function () {
    let file = $(this).parent().prev('img').attr('src')
    let files = $('#cover')[0].files ? $('#cover')[0].files : {}
    for (let i = 0; i < urlArr.length; i++) {
      if (file == urlArr[i]) {
        coverArr.splice(i, 1)
      }
    }
    $(this).parent().parent().parent().remove()
  })
  // 图片预览函数
  function GetObjectURL(file) {
    // createObjectURL  给一个文件对象 可以提取出一个url本地地址出来
    var url = null;
    //判断是否为IE浏览器还是google还是其他浏览器
    if (window.createObjectURL != undefined) {
      url = window.createObjectURL(file)
    } else if (window.URL != undefined) {
      url = window.URL.createObjectURL(file)
    } else if (window.webkitURL != undefined) {
      url = window.webkitURL.createObjectURL(file)
    }
    return url
  }
  $('#btn').click(function () {
    editor.sync();
    var form = document.querySelector("#form")
    let formData = new FormData(form)
    if (coverArr) {
      coverArr.forEach((item) => {
        formData.append('coverArr[]', item)
      })
    }
    $.ajax({
      type: 'post',
      url: `{:url('admin/product/add')}`,
      data: formData,
      dataType: 'json',
      cache: false,
      processData: false,
      contentType: false,
      success: function (result) {
        if (result.code === 1) {
          $.notify({
            message: result.msg,
          }, {
            delay: 1000,
            type: 'success',
            onClose: function () {
              location.href = result.url
            }
          })
        } else {
          $.notify({
            message: result.msg,
          }, {
            delay: 1000,
            type: 'warning'
          })
        }
      }
    })
  })
</script>